{extend name="base" /}
{block name="css"}
    <style>
        /** 统计快捷方式样式 */
        .console-link-block {
            display: block;
            position: relative;
            color: #fff;
            font-size: 18px;
            padding: 25px 20px;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0px 3px 5px rgba(0, 0, 0, .1);
            background-color: rgb(155, 197, 57);
        }

        .console-link-block .console-link-block-num {
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .console-link-block .console-link-block-icon {
            height: 70px;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
        }

        .console-link-block .console-link-block-band {
            background-color: rgb(227, 42, 22);
            font-size: 14px;
            position: absolute;
            width: 80px;
            padding: 0px 0;
            text-align: center;
            transform: rotate(45deg);
            right: -21px;
            top: 8px;
            color: rgba(255, 255, 255, .9);
            z-index: 1;
        }

        /** //统计快捷方式样式end */

        /** 小屏幕下样式 */
        @media screen and (max-width: 992px) {
            .console-link-block {
                font-size: 14px;
                padding: 15px 10px;
            }

            .console-link-block .console-link-block-num {
                font-size: 28px;
                margin-bottom: 0px;
            }

            .console-link-block .console-link-block-icon {
                height: 45px;
                right: 10px;
            }

            .console-link-block .console-link-block-band {
                font-size: 12px;
                right: -25px;
                top: 8px;
            }

        }

        /** 设置每个快捷块的颜色 */
        #consoleLink > div:first-child .console-link-block {
            background-color: rgb(155, 197, 57);
        }

        #consoleLink > div:nth-child(2) .console-link-block {
            background-color: rgb(85, 165, 234);
        }

        #consoleLink > div:nth-child(3) .console-link-block {
            background-color: rgb(157, 175, 291);
        }

        #consoleLink > div:nth-child(4) .console-link-block {
            background-color: rgb(245, 145, 162);
        }

        #consoleLink > div:nth-child(5) .console-link-block {
            background-color: rgb(254, 170, 79);
        }

        #consoleLink > div:last-child .console-link-block {
            background-color: rgb(64, 212, 176);
        }

        /** //设置每个快捷块的颜色end */
    </style>
{/block}
{block name="body"}
<!-- 快捷方式 -->
<div id="consoleLink" class="layui-row layui-col-space15">
    <div class="layui-col-lg3 layui-col-md4 layui-col-sm4 layui-col-xs6">
        <div class="console-link-block">
            <div class="console-link-block-num">{$data.notice}</div>
            <div class="console-link-block-text">待办通知</div>
            <div class="console-link-block-band">本月</div>
        </div>
    </div>
    <div class="layui-col-lg3 layui-col-md4 layui-col-sm4 layui-col-xs6">
        <div class="console-link-block">
            <div class="console-link-block-num">{$data.customer}</div>
            <div class="console-link-block-text">新增客户</div>
            <div class="console-link-block-band">本月</div>
        </div>
    </div>
    <div class="layui-col-lg3 layui-col-md4 layui-col-sm4 layui-col-xs6">
        <div class="console-link-block">
            <div class="console-link-block-num">{$data.track}</div>
            <div class="console-link-block-text">新增回访</div>
            <div class="console-link-block-band">本月</div>
        </div>
    </div>
    
    <div class="layui-col-lg3 layui-col-md4 layui-col-sm4 layui-col-xs6">
        <div class="console-link-block">
            <div class="console-link-block-num">{:number_format($data.order)}</div>
            <div class="console-link-block-text">销售金额（元）</div>
            <div class="console-link-block-band">本月</div>
        </div>
    </div>
</div>
<!--基础数据-->
<div class="layui-card layui-col-space15">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-brief" lay-filter="tabZZT">
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-row layui-col-space30">
                        <!--最新客户-->
                        <div class="layui-col-xs12 layui-col-md4">
                            <table class="layui-table" lay-skin="nob">
                                <colgroup>
                                    <col width="50">
                                    <col>
                                    <col width="160">
                                </colgroup>
                                <thead>
                                    <tr style="background: none;color: #333;">
                                        <th colspan="3">最新客户</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach name="customer" key="i" item="r"}
                                    <tr>
                                        <td><span class="layui-badge {if $i <='2'}layui-bg-red{else}layui-bg-gray{/if}">{$i+1}</span></td>
                                        <td class="layui-elip">{$r.name}</td>
                                        <td>{$r.create_time}</td>
                                    </tr>
                                    {/foreach}
                                </tbody>

                            </table>
                        </div>
                        <!--最新回访-->
                        <div class="layui-col-xs12 layui-col-md4">
                            <table class="layui-table" lay-skin="nob">
                                <colgroup>
                                    <col width="50">
                                    <col>
                                    <col width="160">
                                </colgroup>
                                <thead>
                                    <tr style="background: none;color: #333;">
                                        <th colspan="3">最近回访</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach name="track" key="i" item="r"}
                                    <tr>
                                        <td><span class="layui-badge {if $i <='2'}layui-bg-red{else}layui-bg-gray{/if}">{$i+1}</span></td>
                                        <td>{$r.remark}</td>
                                        <td>{$r.create_time}</td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>
                        <!--最新交易-->
                        <div class="layui-col-xs12 layui-col-md4">
                            <table class="layui-table" lay-skin="nob">
                                <colgroup>
                                    <col width="50">
                                    <col>
                                    <col width="126">
                                </colgroup>
                                <thead>
                                    <tr style="background: none;color: #333;">
                                        <th colspan="3">最新销售</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach name="order" key="i" item="r"}
                                    <tr>
                                        <td><span class="layui-badge {if $i <='2'}layui-bg-red{else}layui-bg-gray{/if}">{$i+1}</span></td>
                                        <td>{$r.remark}</td>
                                        <td>￥{:number_format($r.price,2)}</td>
                                    </tr>
                                    {/foreach}
                                </tbody>

                            </table>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- 统计图表 -->
<div class="layui-row layui-col-space15">

    <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
        <div class="layui-card">
            <div class="layui-card-body">
                <!--div id="tjDivMonth" style="height:400px;"></div-->
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script src="/static/hqui/libs/echarts/echarts.min.js"></script>
<script src="/static/hqui/libs/echarts/echartsTheme.js"></script>
{/block}